<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="home/layout::html-head(pageTitle='话题列表 | ' + ${titleSuffix},pageKey=${pageKey},pageDesc=${pageDesc})" />
<!-- ADD THE CLASS layout-top-nav TO REMOVE THE SIDEBAR. -->
    <body class="layout-top-nav skin-black-light">
        <div class="wrapper">
            <header class="main-header" th:include="home/layout::main-header">
            </header>
            <!-- Full Width Column -->
            <div id="topics" class="content-wrapper">
                <div class="container">
                    <!-- Main content -->
                    <section class="content">
                        <div class="col-md-9 panel panel-default">
                            <div class="panel-body">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a th:class="|rm-link-color|" href="#">活跃</a></li>
                                    <li><a th:class="|rm-link-color|" href="#">精华</a></li>
                                    <li><a th:class="|rm-link-color|" href="#">投票</a></li>
                                    <li><a th:class="|rm-link-color|" href="#">最近</a></li>
                                    <li><a th:class="|rm-link-color|" href="#">零回复</a></li>
                                </ul>
                                <ul class="list-group">
                                    <li class="list-group-item" v-for="item in list">
                                        <span class="badge" title="查看数" style="cursor: pointer">{{item.lastCommentAt}}小时前</span>
                                        <span class="badge" title="查看数" style="cursor: pointer">{{item.pv}}</span>
                                        <span class="badge" title="回复数" style="cursor: pointer">{{item.commentNum}}</span>
                                        <span class="badge" title="投票数" style="cursor: pointer">{{item.likeNum}}</span>
                                        <a th:class="|rm-link-color|" :href="'/topics/' + item.id">{{item.title}}</a>
                                    </li>
                                </ul>
                            </div>
                            <div id="pagination" class="panel-footer"></div>

                        </div>

                        <!-- /.box -->
                        <div class="col-md-3 side-bar">
                            <div class="panel panel-default text-center ">
                                <div class="panel-body">
                                    <a style="margin: 8px;" class="btn btn-default" th:href="@{/topics/create}">
                                        <i class="fa fa-comment text-md"></i> 发起讨论
                                    </a>
                                    <a style="margin: 8px;" class="btn btn-default" href="">
                                        <i class="fa fa-paint-brush text-md"></i> 创作文章
                                    </a>
                                    <a style="margin: 8px;" class="btn btn-default" href="">
                                        <i class="fa fa-link text-md"></i> 分享链接
                                    </a>
                                    <a style="margin: 8px;" class="btn btn-default" href="">
                                        <i class="fa fa-question-circle text-md"></i> 提个问题
                                    </a>
                                </div>
                            </div>
                        </div>
                    </section>
                    <!-- /.content -->
                </div>
                <!-- /.container -->
            </div>
            <!-- /.content-wrapper -->
            <footer class="main-footer" th:include="home/layout::main-footer" />
        </div>
        <!-- ./wrapper -->
        <th:block th:include="home/layout::main-script" />
        <script>
            var appTopics = new Vue({
                el:'#topics',
                data () {
                    return {
                        list:''
                    }
                },
                created() {
                    this.getData(0,10);
                },
                methods:{
                    getData(start,pageSize) {
                        var _this = this;
                        if (localStorage.currPage) {
                            start = localStorage.currPage;
                        }
                        $.post('getTopics',{start:start,pageSize:pageSize},function(response) {
                            _this.list = response.content;
                            $('html,body').animate({scrollTop:$('body').offset().top},200);
                            $("#pagination").whjPaging("setPage", response.currentPage, response.totalPage);
                        },'json',_this);
                    }
                }
            });
            var pageOptions = {
                //可选，每页显示条数下拉框，默认下拉框5条/页(默认)、10条/页、15条/页、20条/页
                pageSizeOpt: [
                    {'value': 5, 'text': '5条/页'},
                    {'value': 10, 'text': '10条/页','selected':true},
                    {'value': 15, 'text': '15条/页'},
                    {'value': 20, 'text': '20条/页'}
                ],
                //可选，css设置，可设置值：css-1，css-2，css-3，css-4，css-5，默认css-1，可自定义样式
                css: 'css-4',
                //可选，总页数
                totalPage: 100,
                //可选，展示页码数量，默认5个页码数量
                showPageNum: 5,
                //可选，首页按钮展示文本，默认显示文本为首页
                firstPage: '首页',
                //可选，上一页按钮展示文本，默认显示文本为上一页
                previousPage: '上一页',
                //可选，下一页按钮展示文本，默认显示文本为下一页
                nextPage: '下一页',
                //可选，尾页按钮展示文本，默认显示文本为尾页
                lastPage: '尾页',
                //可选，跳至展示文本，默认显示文本为跳至
                skip: '跳至',
                //可选，确认按钮展示文本，默认显示文本为确认
                confirm: '确认',
                //可选，刷新按钮展示文本，默认显示文本为刷新
                refresh: '刷新',
                //可选，共{}页展示文本，默认显示文本为共{}页，其中{}会在js具体转化为数字
                totalPageText: '共{}页',
                //可选，是否展示首页与尾页，默认true
                isShowFL: true,
                //可选，是否展示每页N条下拉框，默认true
                isShowPageSizeOpt: true,
                //可选，是否展示跳到指定页数，默认true
                isShowSkip: true,
                //可选，是否展示刷新，默认true
                isShowRefresh: true,
                //可选，是否展示共{}页，默认true
                isShowTotalPage: true,
                //可选，是否需要重新设置当前页码及总页数，默认false，如果设为true，那么在请求服务器返回数据时，需要调用setPage方法
                isResetPage: false,
                //必选，回掉函数，返回参数：第一个参数为页码，第二个参数为每页显示N条
                callBack: function (currPage, pageSize) {
                    localStorage.currPage = currPage;
                    appTopics.getData(currPage,pageSize);
                }
            }
            $("#pagination").whjPaging(pageOptions);
        </script>
    </body>
</html>
